<template>
    <div class="left content">
        <h3>加载CesiumLab4服务</h3>
        <button @click="addLabLayer">添加lab4影像</button>
        <button @click="addLabTerrain">添加lab4地形</button>
        <button @click="addLabTileset('1')">添加lab4模型1</button>
        <button @click="addLabTileset('2')">添加lab4模型2</button>
        <hr>
        <h3>加载GeoServer服务</h3>
        <button @click="addGeoLayer('wmst')">添加wmts影像</button>
        <button @click="addGeoLayer('wms')">添加wms影像</button>
        <hr>
        <button @click="removeLayer">移除全部</button>
    </div>
</template>

<script setup>
import { onBeforeUnmount, ref } from 'vue'
import getMyProjectManager from '@/scripts/getMyProjectManager';
import { wmsJson, wmtsJson } from './data';
import { ES3DTileset, ESImageryLayer, ESTerrainLayer } from 'esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main';
const pm = getMyProjectManager();

let labLayer, labTileset1, labTileset2, labTerrain, geoWmstLayer, geoWmsLayer;

const removeLayer = () => {
    labLayer && pm.destroySceneObject(labLayer);
    labTileset1 && pm.destroySceneObject(labTileset1);
    labTileset2 && pm.destroySceneObject(labTileset2);
    labTerrain && pm.destroySceneObject(labTerrain);
    geoWmstLayer && pm.destroySceneObject(geoWmstLayer);
    geoWmsLayer && pm.destroySceneObject(geoWmsLayer);
    labLayer = labTileset1 = labTileset2 = labTerrain = geoWmstLayer = geoWmsLayer = null;
}

onBeforeUnmount(() => { removeLayer(); })


const addLabLayer = () => {
    if (labLayer) {
        labLayer.flyTo(1);
        return;
    }
    const sceneObject = pm.createSceneObjectFromClass(ESImageryLayer);
    if (!sceneObject) return;
    labLayer = sceneObject;
    //tms  http://192.168.0.115:9004/tile/image/tms/nantong-image/tilemapresource.xml
    //wmts
    sceneObject.url = "http://192.168.0.115:9004/tile/image/wmts/nantong-image/{z}/{x}/{y}";
    sceneObject.zIndex = 1;
    sceneObject.rectangle = [
        121.06322908245195,
        31.794541156058422,
        121.06749023873518,
        31.797868621693333
    ];
    sceneObject.flyTo(1);
}

const addLabTerrain = () => {
    if (labTerrain) {
        labTerrain.flyTo(1);
        return;
    }
    const sceneObject = pm.createSceneObjectFromClass(ESTerrainLayer);
    if (!sceneObject) return;
    labTerrain = sceneObject;
    sceneObject.url = "http://192.168.0.115:9004/tile/terrain/ChdD3xQ2/layer.json";
    sceneObject.rectangle = [
        113.999720, 26.999674,
        115.000162, 28.000116
    ];
    sceneObject.flyTo(1);
}

const addLabTileset = (id) => {
    if (id === '1') {
        if (labTileset1) {
            labTileset1.flyTo(1);
            return;
        }
        const sceneObject = pm.createSceneObjectFromClass(ES3DTileset);
        if (!sceneObject) return;
        labTileset1 = sceneObject;
        sceneObject.url = 'http://192.168.0.115:9004/tile/model/service/UuBhHuQL/tileset.json';
        sceneObject.d(sceneObject.czmTilesetReadyEvent.donce(() => {
            sceneObject.flyTo();
            Message.success("ES3DTileset 加载完成!");
        }));

    } else {
        if (labTileset2) {
            labTileset2.flyTo(1);
            return;
        }
        const sceneObject = pm.createSceneObjectFromClass(ES3DTileset);
        if (!sceneObject) return;
        labTileset2 = sceneObject;
        sceneObject.url = 'http://192.168.0.115:9004/tile/model/service/tddBDqm3P/tileset.json';
        sceneObject.d(sceneObject.czmTilesetReadyEvent.donce(() => {
            sceneObject.flyTo();
            Message.success("ES3DTileset 加载完成!");
        }));
    }

}


const addGeoLayer = (type) => {
    if (type === 'wmst') {
        if (geoWmstLayer) {
            geoWmstLayer.flyTo();
            return;
        }
        const sceneObject = pm.createSceneObjectFromJson(wmtsJson);
        if (!sceneObject) return;
        geoWmstLayer = sceneObject;
        sceneObject.flyTo();
    } else if (type === "wms") {
        if (geoWmsLayer) {
            geoWmsLayer.flyTo();
            return;
        }
        const sceneObject = pm.createSceneObjectFromJson(wmsJson);
        if (!sceneObject) return;
        geoWmsLayer = sceneObject;
        sceneObject.flyTo();
    }
}

</script>

<style scoped>
.left {
    width: 100%;
    height: 100%;
    background: url(../../assets/left/kuang.png) no-repeat;
    background-size: 100% 100%;
}

.content {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.content button {
    padding: 10px 50px;
    margin-bottom: 15px;
    border-radius: 5px;
    cursor: pointer;
}

hr {
    width: 90%;
}
</style>
